<template>
	<view class="allmeal">
		<!-- 标题 -->
		<view class="title">全部套餐<text></text></view>
		<!-- 推荐-->
		<view class="recommed">
			<view class="box">
				<image src="../../static/首页-全部套餐-选中%20副本_slices/编组%206@2x.png" mode=""></image>
			</view>
			<!-- <view class="icon">
				推荐
			</view> -->
			<view class="left">
				<image src="../../static/titleImage.png" mode=""></image>
			</view>
			<view class="right">
				<view class="name">
					<text>精选A套餐</text>
					<view class="min">
						20分钟
					</view>

				</view>
				<view class="content">
					精洗A套餐介绍精洗A套餐介绍精洗A套餐介绍精洗A套餐介绍精洗A套餐介绍精洗A套餐介绍精洗A套餐介绍
				</view>
			</view>
		</view>
		<!-- 其他 -->
		<view   @click="toggle(index)" :class="currtindex==index? 'active':'other'" v-for="(item,index) in 4">
			<view class="other-left">
				<image v-if="currtindex !=index" src="../../static/首页-全部套餐-选中%20副本_slices/meifa@2x(1).png" mode=""></image>
	    	<image v-else src="../../static/首页-全部套餐-选中%20副本_slices/meifa@2x.png" mode=""></image>
			</view>
			<view class="other-right">
				<view class="other-name">
					<text>精选A套餐</text>
					<view class="other-min">
						20分钟
					</view>
				
				</view>
				<view class="other-content">
				介绍精洗A套餐介绍精洗A套餐介绍精洗A套餐介绍介绍精洗A套餐
				</view>
			</view>
		</view>
		<!-- 协议 -->
		<view class="agree">
			<label class="radio">
				<radio color="#FEDC00" value="r1" :checked="ischeck" @click="liclick" />提交即表示同意</label>
			<navigator url="#">《平台用户协议》</navigator>
		</view>
		<!-- 提交 -->
		<button class="confirm" @click="useing">立即提交</button>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				ischeck: true,
				currtindex:0
			}
		},
		onLoad() {
        
		},
		methods: {
			liclick() {
				this.ischeck = !this.ischeck
			},
			// 提交跳转
			useing() {
				uni.navigateTo({
					url: "../washHair/washHair"
				})
			},
			// 切换
			toggle(index){
				this.currtindex = index
			},
			// 获取套餐
			getSelectmeal(){
				uni.request({
					url:'http://localhost:8080/api/packages',
				})
			}
		}
	}
</script>

<style lang="less">
	.allmeal {
		color: balck;
		padding: 30rpx;
		box-sizing: border-box;
.active{
	background-color: #FEDC00;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			height: 180rpx;
			box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 12rpx;
			margin-bottom: 30rpx;
	
		}

		.title {
			position: relative;
			width: 176rpx;
			height: 60rpx;
			font-size: 42rpx;
			font-weight: 500;
			line-height: 60rpx;
			color:rgba(0,0,0,1);
			// border-bottom: 8rpx solid #FEDC00;   
		text{
			position: absolute;
			width: 80rpx;
			height: 20rpx;
			top: 50rpx;
			left:0;
			background-color:#FEDC00 ;
		}
		}

		.recommed {
			position: relative;
		
		height:216rpx;
		background:rgba(255,255,255,1);
		box-shadow:0px 2px 10px 0px rgba(0,0,0,0.1);
		border-radius:12rpx;
		.box{
			position: absolute;
			top: 0;
			right:0;
			image{
				width: 88rpx;
				height: 84rpx;
			
			}
		}
			// .box {
			// 	position: absolute;
			// 	top: -64rpx;
			// 	right: -64rpx;
			// 	width: 0;
			// 	height: 0;
			// 	border: 64rpx solid;
			// 	border-color: transparent transparent #3C81DE transparent;
			// 	transform: rotate(45deg);

			// 	&::after {
			// 		content: '推荐';
			// 		display: inline-block;
			// 		width: 500rpx;
			// 		height: 200rpx;
			// 		position: relative;
			// 		font-size: 25rpx;
			// 		top: 20rpx;
			// 		left: -19rpx;
			// 		color: #fff;
			// 	}
			// }

			
			margin-top: 30rpx;
			margin-bottom: 30rpx;
			width: 690rpx;
			height: 216rpx;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 12rpx;
			display: flex;

		}

		.left {
			width: 180rpx;

			image {
				width: 180rpx;
				height: 216rpx;
				background: rgba(216, 216, 216, 1);
			}
		}

		.right {
			padding: 24rpx 16rpx;
			flex: 1;
			width: 178rpx;
			height: 52rpx;
			font-size: 38rpx;
			font-weight: 400;
		 background-color: rgba(255, 255, 255, 1);

			.name {
				display: flex;
				margin-bottom: 10rpx;
			}

			.min {
				margin-left: 12rpx;
				width: 112rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				border-radius: 22rpx;
				font-size: 22rpx;
				color: rgba(255, 174, 0, 1);
				background: rgba(255, 246, 193, 1);
				border: 2rpx solid rgba(255, 246, 193, 1);
			}

			.content {
				font-size: 26rpx;
				color: rgba(74, 74, 74, 1);
				padding-bottom: 30rpx;
			}

		}

		// 其他
		.other {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			height: 180rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 12rpx;
			margin-bottom: 30rpx;
		}

.other-left{
	display: flex;
	image{
		width:88rpx;
		height:88rpx;
	  border-radius:50%;
		margin: 58rpx 26rpx;
	}
}
.other-right{
		flex: 1;
		padding-top: 22rpx;
		padding-right: 22rpx;
		margin: 0;
		
}
	.other-name {
				display: flex;
				margin-bottom: 10rpx;
				font-size: 38rpx;
			}

			.other-min {
				margin-left: 12rpx;
				width: 112rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				border-radius: 22rpx;
				font-size: 22rpx;
				color: rgba(255, 174, 0, 1);
				background: rgba(255, 246, 193, 1);
				border: 2rpx solid rgba(255, 246, 193, 1);
			}
			.other-content {
				font-size: 26rpx;
				color: rgba(74, 74, 74, 1);
				padding-bottom: 30rpx;
			}



		// 提交
		.agree {
			font-size: 26rpx;
			line-height: 36rpx;
			height: 36rpx;
			display: flex;

			navigator {
				color: #F0AD4E;
			}
		}

		radio {
			color: yellow;
		}

		// 确定
		.confirm {
			width: 690rpx;
			height: 96rpx;
			backgr ound: #FEDC00;
			border-radius: 12rpx;
			margin-top: 42rpx;
		}
	}
</style>
